<template>
  <div>
    <!-- 渲染购物车数据 -->
    <ul>
      <li v-for="item in car" :key="item.id" style="display: flex;padding: 4px;">
        <img :src="item.img" alt="">
        <div>
          <p>
            {{ item.title }}
          </p>
          <p>
            {{ item.desc }}
          </p>
          <p>
            单价：{{ item.price }}--- 数量:{{ item.count }}
          </p>
          <p>
            小计 {{ item.price * item.count }}
          </p>
        </div>
      </li>
    </ul>

    <p>总价： {{ price }}</p>
  </div>
</template>


<script setup>
// import { ref } from 'vue'
// 获取本地存储 car 购物车数据
const car = JSON.parse(localStorage.getItem('car')) || [];

let price = 0;

car.forEach(v => {
  price += v.price * v.count
})
</script>